<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 病人管理</el-breadcrumb-item>
                <el-breadcrumb-item>登记</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="info">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        	<table style="width:100%">
        		<tr style="width:100%">
        			<td colspan=2 class="title">病人挂号登记</td>
        		</tr>
        		<tr style="width:100%">
     					<td class="field">姓名:</td>
        			<td >
						<el-form-item prop="name"><el-input placeholder="请输入名字" style="width:300px" v-model="ruleForm.name"></el-input></el-form-item>
        			</td>
        		</tr>
        		<tr style="width:100%">
        			<td class="field">性别:</td>
        			<td >
						  <el-radio-group v-model="sex">
						    <el-radio :label="0">女</el-radio>
						    <el-radio :label="1">男</el-radio>
						  </el-radio-group>
        			</td>
        		</tr>
        		<tr style="width:100%">
        			<td class="field">年龄:</td>
        			<td ><el-form-item prop="age"><el-input  style="width:50px" placeholder="年龄" v-model="ruleForm.age"></el-input></el-form-item></td>
        		</tr>
         		<tr style="width:100%">
        			<td class="field">电话:</td>
        			<td ><el-form-item prop="phone"><el-input  placeholder="请输入手机号" style="width:150px" v-model="ruleForm.phone"></el-input></el-form-item></td>
        		</tr>	
         		<tr style="width:100%">
        			<td class="field">QQ/微信:</td>
        			<td ><el-form-item prop="wechat"><el-input  placeholder="请输入QQ或微信" style="width:150px" v-model="ruleForm.wechat"></el-input></el-form-item></td>
        		</tr>
         		<tr style="width:100%;">
        			<td class="field" >咨询内容:</td>
        			<td ><el-input
					  type="textarea"
					  :rows="4"
					  placeholder="请输入内容" style="width:400px;margin-top:10px" v-model="ruleForm.content" >
					</el-input>
					</td>
        		</tr>
         		<tr style="width:100%">
        			<td class="field">所属科室:</td>
        			<td >
						  <el-select v-model="ruleForm.deportment_id" placeholder="请选择">
						    <el-option
						      v-for="item in options2"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value"
						      :disabled="item.disabled">
						    </el-option>
						  </el-select>
					</td>
        		</tr>
        		<tr>
        			<td class="field" >病患类型:</td>
        			<td >
						  <el-select v-model="ruleForm.patient_type_id" placeholder="请选择">
						    <el-option
						      v-for="item in options2"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value"
						      :disabled="item.disabled">
						    </el-option>
						  </el-select>
					</td>
        		</tr>		 
         		<tr style="width:100%">
        			<td class="field">媒体来源:</td>
        			<td >				  
        			<el-select v-model="ruleForm.media_id" placeholder="请选择">
						    <el-option
						      v-for="item in options2"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value"
						      :disabled="item.disabled">
						    </el-option>
						</el-select>
					</td>
        		</tr>
         		<tr style="width:100%">
        			<td class="field">地区来源:</td>
        			<td >				  
        			<el-select v-model="ruleForm.zone_id" placeholder="请选择">
						    <el-option
						      v-for="item in options3"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value"
						      :disabled="item.disabled">
						    </el-option>
						</el-select>
					</td>
        		</tr>
         		<tr style="width:100%">
        			<td class="field">专家号:</td>
        			<td ><el-input  placeholder="请输入专家号" style="width:140px" v-model="ruleForm.expert_number"></el-input></td>
        		</tr>   
         		<tr style="width:100%">
        			<td class="field">预约时间:</td>
        			<td >
					    <el-date-picker
					      v-model="ruleForm.push_date"
					      type="datetime"
					      placeholder="选择日期时间">
					    </el-date-picker>
        			</td>
        		</tr> 
         		<tr style="width:100%">
        			<td class="field">备注:</td>
        			<td ><el-input
					  type="textarea"
					  :rows="4"
					  placeholder="请输入备注" style="width:400px" v-model="ruleForm.intro">
					</el-input>
					</td>
        		</tr>  
         		<tr style="width:100%">
        			<td class="field">回访记录:</td>
        			<td ><el-input
					  type="textarea"
					  :rows="4"
					  placeholder="请输入回访记录" style="width:400px" v-model="ruleForm.back_intro">
					</el-input>
					</td>
        		</tr> 
         		<tr style="width:100%">
        			<td class="field">是否到诊:</td>
        			<td >
						<el-switch
						  v-model="ruleForm.come_state"
						  on-color="#13ce66"
						  off-color="#ff4949">
						</el-switch>
					</td>
        		</tr>  
         		<tr style="width:100%" v-if="ruleForm.come_state">
        			<td class="field">到诊时间:</td>
        			<td >
						<el-date-picker
					      v-model="ruleForm.come_date"
					      type="datetime"
					      placeholder="选择日期时间">
					    </el-date-picker>
        			</td>
        		</tr>  
         		<tr style="width:100%">
        			<td class="field">接待医生:</td>
        			<td >				  
        			<el-select v-model="ruleForm.doctor_id" placeholder="请选择">
						    <el-option
						      v-for="item in options2"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value"
						      :disabled="item.disabled">
						    </el-option>
						</el-select>
					</td>
        		</tr> 
        		<tr>
        			<td colspan=2 style="height:80px">
        				 <el-button type="success" style="margin-left:1%;width:220px;" @click="submitForm('ruleForm')">提交登记信息</el-button>
        			</td>
        		</tr>	
        	</table>
        </el-form>
        </div>
    </div>
</template>

<script>
import area from "../Public/area.vue";
export default {
  data () { 
	var checkage = (rule, value, callback) => {
		if(isNaN(parseInt(value))){
			callback(new Error('年龄为数字'));
		}else if(parseInt(value) >120 || parseInt(value) <0){
			callback(new Error('年龄填写错误'));
		}else{
			callback();
		}
	};
	var checkphone = (rule, value, callback) => {
		var reg_phone=/^1[34578]\d{9}$/;
		if(!reg_phone.test(value)){
			callback(new Error('手机号格式错误'));
		}else{
			callback();
		}
	};
    return {
    	sex:0,
    	ruleForm:{
    		name:'',
    		age:'',
    		phone:'',
    		wechat:'',
    		content:'',
    		patient_type_id:'',
    		deportment_id:'',
    		media_id:'',
    		zone_id:'',
    		expert_number:'',
    		push_date:'',
    		intro:'',
    		back_intro:'',
    		come_state:false,
    		come_date:'',
    		doctor_id:''
    	},
        options2: [{
          value: '1',
          label: '黄金糕'
        }, {
          value: '2',
          label: '双皮奶',
          disabled: true
        }, {
          value: '3',
          label: '蚵仔煎'
        }, {
          value: '4',
          label: '龙须面'
        }, {
          value: '5',
          label: '北京烤鸭'
        }],
        options3:[
        	{
        		value:'1',
        		lable:'本地'
        	},
        	{
        		value:'2',
        		lable:'外地'
        	},
        ],
        value2: '',
        //选择时间戳
    	pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        rules:{
            name: [
                { required: true, message: '请输入姓名', trigger: 'blur' }
            ],
            age:[
            	{validator: checkage,trigger: 'blur'}
            ],
            phone:[
            	{validator: checkphone,trigger: 'blur'}
            ],
            wechat: [
                { required: true, message: '请输入QQ或微信', trigger: 'blur' }
            ]
       	}
    }
  },
  created: function () {

  },
  mounted:function(){
  	$('.el-form-item__content').css('margin-left','0px');
  	$('.el-form-item__content').css('margin-top','10px');
  	$('.el-form-item').css('height','50px');
  },
  components: {
    'myarea':area
  },
  watch:{

  },
  methods: {
  	handleCurrentChange(val){
        this.cur_page = val;
        this.getData();
    },
    submitForm(flag){
    	var data=this.ruleForm;
    	data['push_date']=data['push_date'].toLocaleString('chinese',{hour12:false});
    	if(data['come_date'] != ''){
    		data['come_date']=data['come_date'].toLocaleString('chinese',{hour12:false});
    	}
    	var new_data=new Object();
    	for(var i in data){
    		new_data[i]=data[i];
    	}
		this.$http.post("http://www.yuyue.com/api/patient",
		  {
		      name:new_data.name,
		      age:new_data.age,
		      phone:new_data.phone,
		      wechat:new_data.wechat,
		      content:new_data.content,
		      patient_type_id:new_data.patient_type_id,
		      deportment_id:new_data.deportment_id,
		      media_id:new_data.media_id,
		      zone_id:new_data.zone_id,
		      expert_number:new_data.expert_number,
		      push_date:new_data.push_date,
		      intro:new_data.intro,
		      back_intro:this.ruleForm.back_intro,
		      come_state:new_data.come_state,
		      doctor_id:new_data.doctor_id,
		      come_date:new_data.come_date
		  },
		  {emulateJSON:true}
		).then(response=>{
			var data =response.data;
			if(data.code == 200 ){
				this.$router.push({path:"./patientindex"});
			}else{
				this.throw_notice('病人信息提交失败,检查是否提交有误');
			}
		},error=>{
		   this.throw_notice('病人信息提交失败,检查是否提交有误');
		})

    }
  }
}
</script>

<style scoped>
.info{
	width: 100%;
}
.title{
	height: 60px;
	font:bold 30px/58px '微软雅黑';
	text-align: center;
	color:#666;
}
.field{
	width:7%;
	height: 55px;
	font:22px/54px '仿宋';
	text-align: center;
}

</style>
